<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生签到界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main {
            display: flex;
            width: 75%;
            flex-direction: column;
            box-sizing: border-box;
            margin: 2px auto;
        }

        #MainBox {
            display: flex;
            width: 75%;
            height: 350px;
            margin: 5px auto;
        }

        #second {
            margin-top: 10px;
            display: block;
        }

        #sign {
            width: 50%;
            height: 300px;
            overflow: scroll;
            display: none;
            text-align: center;
            overflow-x: hidden;
            overflow-y: auto;
            grid-gap: 4px;
            box-sizing: border-box;
            float: left;
        }

        #notSign {
            width: 50%;
            height: 300px;
            overflow: scroll;
            display: none;
            text-align: center;
            overflow-x: hidden;
            overflow-y: auto;
            grid-gap: 4px;
            grid-template-columns: auto auto auto auto;
            box-sizing: border-box;
            float: left;
        }

        #btnBox {
            width: 360px;
            height: auto;
            margin: 5px auto;
        }

        #stopbtn {
            visibility: hidden;
        }

        #btnBox button {
            margin: 2px 4px;
        }

        #QrCode {
            width: 300px;
            height: 300px;
            display: none;
            margin: 2px auto;
        }

        span {
            height: 18px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            margin: 5px 5px;
            border-radius: 3px;
        }

        .notSigned {
            background-color: #01aaed;
            color: brown;
        }

        .signed {
            background-color: #01aaed;
            color: whitesmoke;
        }

        #titleBox {
            display: none;
            width: 100%;
            height: 32px;
        }

        #titleBox h4 {
            width: 50%;
            font-size: 24px;
            height: auto;
            float: left;
        }

        #signInfo {
            visibility: hidden;
        }

        h1 {
            text-align: center;
            font-size: 32px;
            width: 100%;
            height: 32px;
            line-height: 32px;
            color: #01aaed;
        }
    </style>
    <!-- 引入layui css -->
    <link href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <!-- 引入layui js -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
<h1>21软件0102教务系统学生签到</h1>
<br>
<div id="main">
    <div id="MainBox">
        <div id="btnBox" class="layui-form">
            <button class="layui-btn" id="stopbtn">停止签到</button>
            <button class="layui-btn" id="startbtn">开始签到</button>
            <button class="layui-btn" id="signInfo">查看签到信息</button>
            <select name="type">
                <option value="-1">请选择签到类型</option>
                <option value="1">普通签到</option>
                <option value="2">二维码签到</option>
            </select>
        </div>
        <img id="QrCode" src="">
    </div>

    <div id="second">
        <div id="titleBox">
            <h4 style="color: #01aaed">已完成签到:</h4>
            <h4 style="color:brown">未完成签到人数:</h4>
        </div>
        <div id="sign">
        </div>
        <div id="notSign">
        </div>
    </div>
</div>
<script>
    let baseUrl = window.location.host;
    console.log(baseUrl);
    window.onload = function () {
        let signStatus = void 0;
        $.ajax({
            url: "/sign/signStatus",
            async: false,
            success: (status) => {
                if (status) {
                    signStatus = status;
                    $('#signInfo').css('visibility', 'visible');
                    $("#stopbtn").css('visibility', 'visible');
                }
            }
        })
        if (signStatus) {
            $.ajax({
                url: "/sign/getSignType",
                success: (type) => {
                    let qrCode = $("#QrCode");
                    if (type === 2) {
                        qrCode.attr('src', 'https://' + baseUrl + '/QrCode/getQrCode?content=https://' + baseUrl + '/pages/Sign_QRcode.html?timeStamp=' + Date.now())
                        qrCode.css('display', 'block');
                    }
                }
            })
        }
    }
    let signedstr = '';
    let notSignstr = '';
    let isSigned = false;
    $('#startbtn').click(() => {
        let type = document.getElementsByName("type")[0].value;
        if (type !== '-1') {
            $.ajax({
                method: 'GET',
                url: '/sign/startSign',
                data: {"type": type},
                success: (data) => {
                    let qrCode = $("#QrCode");
                    if (data.code === 1) {
                        if (type === '2') {
                            qrCode.attr('src', 'https://' + baseUrl + '/QrCode/getQrCode?content=https://' + baseUrl + '/pages/Sign_QRcode.html?timeStamp=' + Date.now())
                            qrCode.css('display', 'block');
                            alert('签到发起成功，二维码15秒刷新一次!');
                            let id = setInterval(() => {
                                if (isSigned) {
                                    qrCode.attr('src', 'https://' + baseUrl + '/QrCode/getQrCode?content=https://' + baseUrl + '/pages/Sign_QRcode.html?timeStamp=' + Date.now())
                                } else {
                                    clearInterval(id);
                                }
                            }, 15 * 1000);
                        } else {
                            alert(data.msg);
                        }
                        $('#signInfo').css('visibility', 'visible');
                        $("#stopbtn").css('visibility', 'visible');
                        isSigned = true;
                    } else if (data.code === -1) {
                        alert(data.msg);
                    }
                },
                complete: function (xhr) {
                    if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                        alert("登陆时间过长，请重新登陆!");
                        parent.location.href = xhr.getResponseHeader("CONTENTPATH");
                    }
                }
            })
        } else {
            alert('请先选择签到类型在发起签到')
        }


    })
    $('#stopbtn').click(() => {
        $("#QrCode").hide();
        $("#sign").css("display", 'grid')
        $("#notSign").css("display", 'grid')
        $("#titleBox").css("display", 'block')
        showSigned();
        showNotSigned();
        $.ajax({
            method: 'GET',
            url: '/sign/stopSign',
            success: (data) => {
                if (data.code === 1) {
                    alert(data.msg);
                    $('#signInfo').css('visibility', 'hidden');
                    $('#stopbtn').css('visibility', 'hidden');
                    isSigned = false;
                } else if (data.code === -1) {
                    alert(data.msg)
                }
            },
            complete: function (xhr) {
                if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                    alert("登陆时间过长，请重新登陆!");
                    parent.location.href = xhr.getResponseHeader("CONTENTPATH");
                }
            }
        })
    })

    $('#signInfo').click(() => {
        $("#sign").css("display", 'grid')
        $("#notSign").css("display", 'grid')
        $("#titleBox").css("display", 'block')
        showSigned();
        showNotSigned();
    })

    function showSigned() {
        signedstr = '';
        $.ajax({
            type: "GET",
            url: "/sign/getSign",
            async: false,
            success: (result) => {
                // console.log(result)
                if (result.code === 1) {
                    for (let i = 0; i < result.data.length; i++) {
                        signedstr = signedstr + "<span class='signed'>" + result.data[i].name + "</span>";
                        // console.log(result.data[i]);
                    }
                    document.getElementById('sign').innerHTML = signedstr;
                } else {
                    alert("从服务器获取已签到失败");
                }
            },
            complete: function (xhr) {
                if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                    alert("登陆时间过长，请重新登陆!");
                    parent.location.href = xhr.getResponseHeader("CONTENTPATH");
                }
            }
        })
        return signedstr;
    }

    function showNotSigned() {
        notSignstr = '';
        $.ajax({
            type: "GET",
            url: "/sign/getNotSigned",
            async: false,
            success: (result) => {
                // console.log(result)
                if (result.code === 1) {
                    for (let i = 0; i < result.data.length; i++) {
                        notSignstr = notSignstr + "<span class='notSigned'>" + result.data[i].name + "</span>";
                    }
                    document.getElementById('notSign').innerHTML = notSignstr;
                } else {
                    alert("从服务器获取未签到人员失败");
                }
            },
            complete: function (xhr) {
                if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                    alert("登陆时间过长，请重新登陆!");
                    parent.location.href = xhr.getResponseHeader("CONTENTPATH");
                }
            }
        })
        return notSignstr;
    }
</script>
</body>
</html>